<template>
  <div>
    <van-search
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      @search="onSearch"
      @cancel="onCancel"
    />
<div >
    <van-card
      v-for="item in SearchProductList"
      :key="item.id"
      :price="item.price"
      :desc="item.shop"
      :title="item.product"
      :thumb="item.picture"
    >
      <template #footer>
        <v-button size="large" @click="onDetail(item.id)">查看详情</v-button>
      </template>
    </van-card>
</div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import type { Ref } from 'vue'
import { RequestSerach } from '@/api/product'
import type { IProduct } from '@/types/Types'
import { useProductDetail } from '@/hooks/home'
const SearchProductList: Ref<Array<IProduct>> = ref([])
const value= ref()
const { onDetail } = useProductDetail()
const onCancel = ()=>{
  history.back()
}

const onSearch = () =>{
	let arr = Object.values(value)
    console.log(arr);
    let arr1=arr.slice(4,5)
    let keyword = arr1.toString()
	const getSearchList = async () => {
		let data = await RequestSerach(keyword)
		let { resultCode, resultInfo } = data
		if (resultCode == 1) {
			SearchProductList.value = resultInfo.list
		}else{
      SearchProductList.value = ''
    } 
	}
  getSearchList()
  console.log(keyword,'typeof(keyword)');
  console.log(value,'value');
  console.log(SearchProductList);
  
}
</script>

<style scoped></style>
